<template>
  <section class='f-phone-active-detail'>
    <img style="width:100%" src="@/assets/imgs/jhh_yindao_pic.png" alt="">

    <ul class="f-info">
      <li style="width: 50%;">
        <p>供应商：</p>
        <p>{{form.shopName}}</p>
      </li>
      <li>
        <p>归属省市：</p>
        <p>{{form.provinceAreaName}}-{{form.cityAreaName}}</p>
      </li>
      <li class="f-mt-10" style="width: 50%;">
        <p>商品名称：</p>
        <p>{{form.goodsName}}</p>
      </li>
      <li class="f-mt-10">
        <p>运营商：</p>
        <p>{{form.operator}}</p>
      </li>
      <li class="f-mt-10" style="width: 50%;">
        <p>套餐：</p>
        <p>{{form.packageInfo}}</p>
      </li>
      <li class="f-mt-10">
        <p>面值：</p>
        <p>{{form.price / 100}}元</p>
      </li>
    </ul>

    <van-swipe :autoplay="300000">
      <van-swipe-item>
        <div class="f-text">
          <p>开卡二维码</p>
          <p class="f-animation">︾</p>
        </div>

        <section id="test" class="f-qrcode">
          <img style="width:165px;height:165px" :src="form.openQr" alt="">
        </section>

        <div class="f-center f-mt-20">
          <van-button round type="primary" class="f-pl-30 f-pr-30" @click="saveImg(form.openQr)">保存二维码至本机</van-button>
          <van-button v-if="form.openUrl" round type="primary" style="margin-left: 5px;" class="f-pl-30 f-pr-30"
            @click="openQrcode(form.openUrl)">打开开卡链接</van-button>
        </div>
      </van-swipe-item>
      <van-swipe-item v-if="form.activateQrCode">
        <div class="f-text">
          <p>激活二维码</p>
          <p class="f-animation">︾</p>
        </div>

        <section class="f-qrcode">
          <img style="width:165px;height:165px" :src="form.activateQrCode" alt="">
        </section>

        <div class="f-center f-mt-20">
          <van-button round type="primary" class="f-pl-30 f-pr-30" @click="saveImg(form.activateQrCode)">保存二维码至本机</van-button>
          <van-button v-if="form.activateUrl" round type="primary" style="margin-left: 5px;" class="f-pl-30 f-pr-30"
            @click="openQrcode(form.activateUrl)">打开激活链接</van-button>
        </div>
      </van-swipe-item>
    </van-swipe>

    <div class="f-tips f-pb-30">
      <p>温馨提示：</p>
      <p>1.请使用另外一台手机的微信扫码打开开卡链接。</p>
      <p>2.点击上方“保存二维码至本机”，将二维码保存至手机相册，然后通过微信扫一扫选择相册中保存的二维码进行识别。</p>
    </div>

    <div class="f-center f-mb-20" v-if="form.openProcess">
      <a style="font-size: 14px;" @click="toFlow">查看详细开卡流程 ></a>
    </div>
  </section>
  <url-page ref="urlPageRef" />
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import QrcodeVue from 'qrcode.vue'
import api from '../api'
import { successDeal } from '@/utils/utils';
import JsBridge from '@/utils/JsBridge.js'
import { showLoadingToast, closeToast, showToast } from 'vant';
import urlPage from './components/urlPage.vue'

export default {
  components: { QrcodeVue, urlPage },

  setup(props, context) {
    const store = useStore()
    const router = useRouter()

    const route = useRoute();

    const urlPageRef = ref(null)

    const state = reactive({
      form: {},

      iccid: "",
      goodsId: "",
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '号卡激活引导',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightText: '',
      });

      state.goodsId = route.query.goodsId
      if (route.query.goodsId) {
        getGuideInfo(1, route.query.goodsId)
      }

      state.iccid = route.query.iccid
      if (route.query.iccid) {
        getGuideInfo(2, route.query.iccid)
      }

      state.phone = route.query.phone
      if (route.query.phone) {
        getGuideInfo(3, route.query.phone)
      }
    })

    const getGuideInfo = (type, id) => {
      let json = {
        "goodsId": type == 1 ? id : "",
        "iccid": type == 2 ? id : "",
        "phone": type == 3 ? id : "",
      }
      api.guideInfo(json).then(res => {
        console.log(res.data)
        state.form = res.data
      })
    }

    const toFlow = () => {
      router.push({
        path: "/index/phoneActive/flow",
        query: {
          "goodsId": state.goodsId ? state.goodsId : "",
          "iccid": state.iccid ? state.iccid : "",
          "phone": state.phone ? state.phone : "",
        }
      })
    }

    const saveImg = (fileUrl) => {
      showLoadingToast({
        message: '保存中...',
        forbidClick: true,
        duration: 0,
      });

      JsBridge.callHandler('checkPermissions', 'android.permission.WRITE_EXTERNAL_STORAGE', (res) => {
        const obj = JSON.parse(res)
        const { result } = obj
        if (!result) {

          JsBridge.callHandler('saveFile', { fileUrl }, (res) => {
            successDeal('保存成功，请前往相册查看！')
          })
        } else {
          showToast('该功能需要访问您的相册，请打开权限')
          setTimeout(() => {
            JsBridge.callHandler('requestPermissions', 'android.permission.WRITE_EXTERNAL_STORAGE', (res) => {
              console.log(res)
            })
          }, 500);
        }
      })
    }

    function openQrcode(url) {
      if (!url) return
      JsBridge.callHandler('openUrl', url, (res) => {
        console.log('openUrl', res)
      })
      // urlPageRef.value.dialogShow('https://cope.yimuwulian.com/cmcc/login/card/all')
    }

    return {
      ...toRefs(state),
      urlPageRef,
      toFlow,
      saveImg,
      openQrcode,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-phone-active-detail {
  background: #ffffff !important;
  .f-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    text-align: center;
    margin-left: 2%;
    li {
      display: flex;
      color: #000000;
      p:first-child {
        color: #666666;
        width: 73px;
        text-align: right;
      }
    }
  }
  .f-text {
    font-size: 24px;
    color: #266ef2;
    text-align: center;
    margin-top: 32px;
  }
  .f-animation {
    animation: move 0.5s infinite alternate; /*infinite无限循环，alternate动画反向执行回到起点*/
  }
  .f-qrcode {
    text-align: center;
  }
  .f-tips {
    font-size: 12px;
    color: #424242;
    padding-left: 35px;
    padding-right: 10px;
    margin-top: 19px;
  }

  @keyframes move {
    from {
      transform: translateY(0) rotate(0);
    }
    to {
      transform: translateY(10px);
    }
  }
}
</style>
<style lang="scss" >
.f-phone-active-detail {
  .van-swipe__indicators {
    bottom: 55px;
  }
}
</style>